<template>
  <div>
      <el-main>
          <!-- 搜索框区 -->
      <div>
        <el-input
          style="width: 180px; height: 32px; margin-right: 5px"
          placeholder="请输入id"
          v-model="selectByKey.id"
          suffix-icon="Search"
          clearable
        >
        </el-input>
        <el-input 
          style="width: 180px; height: 32px; margin-right: 5px"
          placeholder="请输入类型"
          v-model="selectByKey.type"
          suffix-icon="Search"
          clearable
        >
        </el-input>
        <!-- <el-input disabled
          style="width: 180px; height: 32px; margin-right: 5px"
          placeholder="请输入预约状态"
          suffix-icon="Message"
          v-model="selectByKey.phone"
          clearable
        >
        </el-input> -->
        <el-button type="primary"
          style="height: 32px; width: 60px; font-size: 13px" @click="load">搜索</el-button>
          <el-button type="warning"
          style="height: 32px; width: 60px; font-size: 13px" @click="reset">重置</el-button>
      </div>

      <!-- 新增按钮区域 -->
      <div style="margin: 10px 0px">
        <el-button  @click="handleAdd" type="primary">
          新增<el-icon class="el-icon--right"><CirclePlus /></el-icon>
        </el-button>

        <!-- <el-popconfirm
                width="220"
                confirm-button-text="确定"
                cancel-button-text="不,再想想"
                title="您确定要删除吗?"
                @confirm="delBatch"
              >
                <template #reference>
                 <el-button disabled type="danger">
                  批量删除<el-icon class="el-icon--right"><Remove /></el-icon>
                </el-button>
                </template>
              </el-popconfirm>

        <el-upload
            class="upload-demo"
            :action="'http://'+serverIp+':9090/user/import'"
            style="display: inline-block;margin: 0px 12px;"
            :show-file-list="false"
            accept="xlsx"
            :on-success="handleImportSuccess"
            :on-error="handleImportError"
            >
             <el-button disabled type="primary">
                导入<el-icon class="el-icon--right"><Upload /></el-icon>
             </el-button>
        </el-upload>
       


        <el-button disabled type="primary" @click="handleExport">
          导出<el-icon class="el-icon--right"><Download /></el-icon>
        </el-button> -->
      </div>

      <div>
        <el-scrollbar>
          <el-table
            height="450"
            :data="tableData"
            border
            stripe
            size="small"
            :header-cell-class-name="headerBg"
            @selection-change="handleSelectionChange"
          >
           <el-table-column type="selection" width="55" />
            <el-table-column prop="id" label="id" width="100" />
            <el-table-column prop="type" label="类型" width="170" />
            <el-table-column prop="capacity" label="容纳人数" width="170" />
            <el-table-column prop="price" label="价格" width="70" />
            <el-table-column prop="reservationState" label="预约状态" width="170">
              <template #default="scope">
                 <el-tag  :type="scope.row.reservationState?'success':'info'">{{scope.row.reservationState?"已预约":"未预约"}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="lockState" label="解锁状态" width="70" >
              <template #default="scope">
                 <el-tag  :type="scope.row.lockState?'':'info'">{{scope.row.lockState?"已解锁":"未解锁"}}</el-tag>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="conditionId" label="空调id" width="70" /> -->
            <el-table-column prop="edit" label="操作">
              <template #default="scope">
                <el-button
                type="success"
                  @click="handleEdit(scope.$index, scope.row)"><el-icon style="margin-left:3px"><EditPen /></el-icon>
                  </el-button>
                <el-popconfirm
                width="220"
                confirm-button-text="确定"
                cancel-button-text="不,再想想"
                title="您确定要删除吗?"
                @confirm="handleDelete(scope.$index, scope.row.id)"
              >
                <template #reference>
                  <el-button  type="danger"><el-icon style="margin-left:3px"><Delete /></el-icon>
                  </el-button>
                </template>
              </el-popconfirm>
              <!-- 详情按钮 -->
              <el-button disabled @click="handleInfo(scope.$index, scope.row)" type="info"><el-icon style="margin-left:3px"><InfoFilled /></el-icon></el-button>

              </template>
            </el-table-column>
          </el-table>
          <!-- 分页器 -->
          <div style="margin: 10px">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[2,5,10,15]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </el-scrollbar>

        <!-- 对话框 -->
         <el-dialog @close="handleClose"  title="棋牌室信息" v-model="dialogFormVisible" width="30%" >
          <el-form label-width="80px" size="small">
             <el-form-item label="房间id">
              <el-input disabled  v-model="form.id" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="类型">
              <el-input  v-model="form.type" autocomplete="off"></el-input>
            </el-form-item>
            <!-- <el-form-item label="角色">
              <el-select clearable v-model="form.role" placeholder="请选择角色" style="width: 100%">
                <el-option v-for="item in roles" :key="item.name" :label="item.name" :value="item.flag"></el-option>
              </el-select>
            </el-form-item> -->
            <el-form-item label="容纳人数">
              <el-input v-model="form.capacity" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="价格">
              <el-input v-model="form.price" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="预约状态">
              <el-tag  :type="form.reservationState?'success':'info'">{{form.reservationState?"已预约":"未预约"}}</el-tag>
            </el-form-item>
            <el-form-item label="解锁状态">
              <!-- <el-input disabled :placeholder="form.lockState?'已解锁':'未解锁'"  autocomplete="off"></el-input> -->
              <el-tag  :type="form.lockState?'':'info'">{{form.lockState?"已解锁":"未解锁"}}</el-tag>
            </el-form-item>
          </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click=" this.dialogFormVisible = false,this.form = {}">取消</el-button>
                <el-button type="primary" @click="save">
                  确定
                </el-button>
              </span>
            </template>
        </el-dialog>

        <!-- 抽屉 -->
        <el-drawer
            ref="drawerRef"
            v-model="drawer"
            title="订单详情"
            direction="rtl"
            :before-close="()=>{this.drawer = false,this.form = {}}"
          >
            <div>
                  <el-descriptions
                    title="订单信息"
                    :column="1"
                    size="default"
                    direction="horizontal"
                    style="margin:0px 0px 10px 0px"
                  >
                    <el-descriptions-item label="订单id：">{{form.id}}</el-descriptions-item>
                    <el-descriptions-item label="创建时间：">{{form.createTime}}</el-descriptions-item>
                    <el-descriptions-item label="开始时间：">{{form.startTime}}</el-descriptions-item>
                    <el-descriptions-item label="加时：" >{{form.overTime}}</el-descriptions-item>
                    <el-descriptions-item label="结束时间：" >{{form.endTime}}</el-descriptions-item>
                    <el-descriptions-item label="空调时长：" >{{form.conditionTime}}</el-descriptions-item>
                    <el-descriptions-item label="总价：" >{{form.sumPrice}}</el-descriptions-item>
                    <el-descriptions-item label="状态：" >
                      <el-tag :type="state" size="small">
                        {{form.state}}
                      </el-tag>
                    </el-descriptions-item>
                  </el-descriptions>

                  <el-descriptions
                    title="棋牌室信息"
                    :column="1"
                    size="default"
                    direction="horizontal"
                    style="margin:10px 0px"
                  >
                    <el-descriptions-item label="房间id：">{{roomForm.id}}</el-descriptions-item>
                    <el-descriptions-item label="类型："><el-tag size="small">{{roomForm.type}}</el-tag></el-descriptions-item>
                    <el-descriptions-item label="价格：">{{roomForm.price}}</el-descriptions-item>
                    <el-descriptions-item label="当前预约状态：" ><el-tag :type="roomForm.reservationState?'warning':'success'" size="small">{{roomForm.reservationState?"未预约":"已预约"}}</el-tag></el-descriptions-item>
                    <el-descriptions-item label="解锁状态：" ><el-tag :type="roomForm.lockState?'warning':'success'" size="small">{{roomForm.lockState?"未解锁":"已解锁"}}</el-tag></el-descriptions-item>
                  </el-descriptions>

                  <el-descriptions
                    title="用户信息"
                    :column="1"
                    size="default"
                    direction="horizontal"
                  >
                    <el-descriptions-item label="用户名：">{{userForm.username}}</el-descriptions-item>
                    <el-descriptions-item label="电话：">{{userForm.phone}}</el-descriptions-item>
                  </el-descriptions>
            </div>
          </el-drawer>

       </div>
    </el-main>
      
    
  </div>
</template>

<script>
import { mapState } from 'vuex'
import {serverIp} from '../../public/config.js'

export default {
    name:'order',
    data(){
        return{
          serverIp:serverIp,
          // 详情
          drawer:false,
          dialogForm:{},
          //user信息
          userForm:{
            username:"",
            phone:""
          },
          //棋牌室信息
          roomForm:{},
          //
          tableData:[],

            //user
            pageNum:1,
            pageSize:10,
            total:0,
            selectByKey:{
                merchantId:"",
                id:"",
                phone:""
            },
            //编辑表单
            form:{},
            roles:[],
            dialogFormVisible: false,
            // 多选框选中对象
            multipleSelection:[],
        }
    },
    created(){
        //
        this.load()
        //

    },
    methods:{
      //详情按钮
        handleInfo(index,row){
          ////console.log('row',row.openid);
            //发送请求
            this.userInfoByOpenid(row.openid)
            this.roomInfoByRoomId(row.roomId)
            //
            this.drawer = true
            this.form = row
        },
        //导出成功
        handleExport(){
            window.open(`http://${serverIp}:9090/user/export`)
        },
        //导入失败
        handleImportError(){
             this.$message.error("导入失败!")
        },
        //导入成功
        handleImportSuccess(){
            this.$message.success("导入成功!")
            this.load()
        },
         //多选删除
        delBatch(){
        let ids = this.multipleSelection.map(v => v.id)  //[{},{},{}] => [1,2,3]
        this.request.post("/user/del/batch",ids).then(res => {
            if (res.code === '200') {
            this.$message.success("删除成功")
            this.load()
            } else {
            this.$message.error("删除失败")
            }
        })
        },
        //多选选中的对象
        handleSelectionChange(val){
        this.multipleSelection = val
        },
        //对话框关闭
        handleClose(){

        this.dialogFormVisible = false,
        this.form = {}
        },
    
        //删除行
        handleDelete(index,id){
        this.request.delete("/room/delete/"+ id).then(res => {
          console.log(res);
            if (res.code === 200) {
            this.$message.success("删除成功")
            this.load()
            } else {
            this.$message.error("删除失败")
            }
        })
        //删除棋牌室对应的空调
           
            let json = {
              merchantId:this.mUser.id,
              // id:this.selectByKey.id,
              // state:this.selectByKey.state==="开"?"1":(this.selectByKey.state==="关"?"0":""), 
              roomId:id
            }
            // 对应空调数组
            var conditionArry = []
            this.request.post("/condition/getAll/"+this.pageNum+"/"+this.pageSize, JSON.stringify(json)
            ).then(res => {
                if(res.code === 200)
                // console.log("查询棋牌室对应空调：",res)
                 conditionArry = res.data.records
                 console.log(conditionArry[0].id);

                  //删除对应空调
                  this.request.delete("/condition/delete/"+ conditionArry[0].id).then(res => {
                      if (res.code === 200) {
                      this.$message.success("删除成功")
                      this.load()
                      } else {
                      this.$message.error("删除失败")
                      }
                  })

            })
            

        },
        //编辑
        handleEdit(index, row){
        ////console.log(index, row);
        this.dialogFormVisible = true,
        this.form = row
        },
        //保存表单
        save() {
          
          if(this.form.id){
            //更新
                  this.request.put("/room/update", this.form).then(res => {
                    ////console.log('update',res);
                      if (res.code === 200) {
                      this.$message.success("保存成功")
                      this.dialogFormVisible = false
                      this.form = {}
                      this.load()
                      } else {
                      this.$message.error("保存失败")
                      }
                  })

          }else{
            //新增
            ////console.log("新增");
            ////console.log('this.mUser',this.mUser);
                // 准备JSON
                let U = {
                  // 默认商家id
                  merchantId:this.mUser.id,
                  type:this.form.type,
                  capacity:this.form.capacity,
                  price:this.form.price,
                }
                  this.request.post("/room/add", JSON.stringify(U)).then(res => {
                    //console.log('add',res);
                      if (res.code === 200) {
                      this.$message.success("保存成功")
                      this.dialogFormVisible = false
                      this.form = {}
                      this.load()
                      } else {
                      this.$message.error("保存失败")
                      }
                  })



          }

          

            
        },

        //新增按钮
        handleAdd(){
        this.dialogFormVisible = true;
        },
        // 表头背景
        headerBg({ row, rowIndex }) {
        if (rowIndex == 0) {
            return "headerBgClass";
        }
        },

        // 重置按钮
        reset(){
          this.selectByKey={},
        this.load()
        },

        //发送请求
        load() {
          // 准备JSON
          // 默认商家个人id  订单id查询
            let json = {
              merchantId:this.mUser.id,
              id:this.selectByKey.id,
              type:this.selectByKey.type,
              reservationState:"",
              lockState:""
            }
            this.request.post("/room/getAll/"+this.pageNum+"/"+this.pageSize, JSON.stringify(json)
            ).then(res => {
                if(res.code === 200)
                //console.log(res)
                this.tableData = res.data.records
                this.total = res.data.total
            })

            //
          



        },
        

        ////根据id查询棋牌室信息
        roomInfoByRoomId(roomId){
          //console.log(roomId);
          // 默认商家id为1
            this.request.get("/room/getById/"+roomId+"/"+this.mUser.id+"").then(res=>{
              // //console.log(res);
              if(res.code === 200){
                this.roomForm = res.data
                return
              }
            })
        },





        // 根据openid查询用户信息
        userInfoByOpenid(openId){
            //获取用户信息byId
            //准备JSON
            let S = {
                username:"",
                phone:"",
                id:""
            }
            this.request.post("/user/getAll/1/5",JSON.stringify(S)).then(res => {
              if(res.code === 200){
                  //筛选出该openid的user
                  res.data.records.forEach(item => {
                      if(item.openid === openId){
                          this.userForm = item
                          return
                      }
                  });
              }
              
            // this.roles = res.data
          })
        },

        // 分页器
        handleSizeChange(val) {
        //console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.load();

        },
        handleCurrentChange(val) {
        //console.log(`当前页: ${val}`);
        this.pageNum = val;
        this.load();
        },
    },
    computed:{
      ...mapState("personAbout",["mUser"])
    }

}
</script>

<style>
.headerBgClass {
  background-color: rgb(221, 213, 213) !important;
}
</style>